<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Layout</title>
  <style>
    html, body,
    h1,h2,h3,h4,h5,h6,p {
      margin: 0;
      padding: 0;
    }
    .question {
      font-size: 20px;
      margin: 12px 0;
    }

    .layout {
      margin-top: 10px;
      height: 100px;
    }

    .layout article div {
      min-height: 100px;
    }

    .layout-column {
      height: 300px;
      margin-top: 10px;
    }
  </style>
</head>

<body>
  <h3 class="question">题目：假设高度已知，写出三栏布局，其中左栏、右栏宽度各位300px，中间自适应</h3>

  <section class="layout absolute">
    <style>
      .layout.absolute {
        position: relative;
      }

      .layout.absolute .left-right-center>div {
        position: absolute;
      }

      .layout.absolute .left {
        left: 0;
        width: 300px;
        background: red;
      }

      .layout.absolute .right {
        right: 0;
        width: 300px;
        background: blue;
      }

      .layout.absolute .center {
        left: 300px;
        right: 300px;
        display: block;
        background: yellow;
      }
    </style>
    <article class="left-right-center">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        <h3>绝对定位解决方案</h3>
        <p>1. 脱离文档流，所有的自元素也脱离了文档流，可使用性比较差,不能自适应高度</p>
        <p>2. 布局快捷，兼容性比较好</p>
      </div>
    </article>
  </section>

  <section class="layout float">
    <style>
      .layout.float .left {
        float: left;
        width: 300px;
        background: red;
      }

      .layout.float .right {
        float: right;
        width: 300px;
        background: blue;
      }

      .layout.float .center {
        display: block;
        background: yellow;
      }
    </style>
    <article class="left-right-center">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        <h3>浮动解决方案</h3>
        <p>脱离文档流，高度不一致，需要清除浮动,不能自适应高度</p>
        <p>兼容性很好</p>
      </div>
    </article>
  </section>

  <section class="layout flex">
    <style>
      .layout.flex .left-right-center {
        display: flex;
      }

      .layout.flex .left {
        width: 300px;
        background: red;
      }

      .layout.flex .right {
        width: 300px;
        background: blue;
      }

      .layout.flex .center {
        flex: 1;
        background: yellow;
      }
    </style>
    <article class="left-right-center">
      <div class="left"></div>
      <div class="center">
        <h3>flex弹性盒子解决方案</h3>
        <p>兼容性一般，移动端表现较好</p>
        <p>天生解决布局场景， 自适应高度</p>
      </div>
      <div class="right"></div>
    </article>
  </section>

  <section class="layout table">
    <style>
      .layout.table .left-right-center {
        display: table;
        height: 100px;
        width: 100%;
      }

      .layout.table .left-right-center>div {
        display: table-cell;
      }

      .layout.table .left {
        width: 300px;
        background: red;
      }

      .layout.table .right {
        width: 300px;
        background: blue;
      }

      .layout.table .center {
        flex: 1;
        background: yellow;
      }
    </style>
    <article class="left-right-center">
      <div class="left"></div>
      <div class="center">
        <h3>表格布局解决方案</h3>
        <p>兼容性很好 兼容 ie8，自适应高度</p>
        <p>三栏高度强制取一致，都取最高的一栏</p>
      </div>
      <div class="right"></div>
    </article>
  </section>

  <section class="layout grid">
    <style>
      .layout.grid .left-right-center {
        display: grid;
        width: 100%;
        grid-template-rows: 100px;
        grid-template-columns: 300px auto 300px;
      }

      .layout.grid .left {
        background: red;
      }

      .layout.grid .right {
        background: blue;
      }

      .layout.grid .center {
        background: yellow;
      }
    </style>
    <article class="left-right-center">
      <div class="left"></div>
      <div class="center">
        <h3>grid 网格布局 解决方案</h3>
        <p>最新的css特性，兼容性较差</p>
        <p>代码简化，为布局而生，自适应高度</p>
      </div>
      <div class="right"></div>
    </article>
  </section>

  <h1 class="question">拓展：高度不给定，以上五种布局会如何</h1>

  <ul>
    <li>语义化掌握到位</li>
    <li>页面布局理解深刻</li>
    <li>CSS基础知识扎实</li>
    <li>思维灵活且积极上进 （grid布局）</li>
    <li>代码书写规范</li>
  </ul>

  <section class="layout-column absolute">
    <style>
      .layout-column.absolute .top-bottom-center {
        position: relative;
        height: 100%;
      }

      .layout-column.absolute .top-bottom-center > div {
        position: absolute;
        width: 100%;
      }

      .layout-column.absolute .top {
        top: 0;
        height: 40px;
        background: red;
      }

      .layout-column.absolute .bottom {
        bottom: 0;
        height: 40px;;
        background: blue;
      }

      .layout-column.absolute .center {
        top: 40px;
        bottom: 40px;
        background: yellow;
      }
    </style>
    <article class="top-bottom-center">
      <div class="top"></div>
      <div class="center">
        <h3>绝对定位解决方案</h3>
        <p>上下高度固定，中间自适应</p>
      </div>
      <div class="bottom"></div>
    </article>
  </section>

  <section class="layout-column flex">
    <style>
      .layout-column.flex .top-bottom-center {
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      .layout-column.flex .top {
        height: 40px;
        background: red;
      }

      .layout-column.flex .bottom {
        height: 40px;;
        background: blue;
      }

      .layout-column.flex .center {
        flex: 1;
        background: yellow;
      }
    </style>
    <article class="top-bottom-center">
      <div class="top"></div>
      <div class="center">
        <h3>flex 弹性盒子 解决方案</h3>
        <p>上下高度固定，中间自适应</p>
      </div>
      <div class="bottom"></div>
    </article>
  </section>

  <section class="layout-column table">
    <style>
      .layout-column.table .top-bottom-center {
        display: table;
        height: 100%;
        width: 100%;
      }

      .layout-column.table .top-bottom-center .row {
        display: table-row;
      }

      .layout-column.table .top-bottom-center .row > div {
        display: table-cell;
      }

      .layout-column.table .top {
        height: 40px;
        background: red;
      }

      .layout-column.table .bottom {
        height: 40px;;
        background: blue;
      }

      .layout-column.table .center {
        background: yellow;
      }
    </style>
    <article class="top-bottom-center">
      <div class="row"><div class="top"></div></div>
      <div class="row">
        <div class="center">
          <h3>table 解决方案</h3>
          <p>上下高度固定，中间自适应</p>
        </div>
      </div>
      <div class="row"><div class="bottom"></div></div>
    </article>
  </section>

  <section class="layout-column grid">
    <style>
      .layout-column.grid .top-bottom-center {
        display: grid;
        width: 100%;
        height: 100%;
        grid-template-rows: 40px auto 40px;
        grid-template-columns: auto;
      }

      .layout-column.grid .top {
        background: red;
      }

      .layout-column.grid .bottom {
        background: blue;
      }

      .layout-column.grid .center {
        background: yellow;
      }
    </style>
    <article class="top-bottom-center">
      <div class="top"></div>
      <div class="center">
        <h3>grid 网格布局 解决方案</h3>
        <p>上下高度固定，中间自适应</p>
      </div>
      <div class="bottom"></div>
    </article>
  </section>

</body>

</html>
